<template>
  <div>
    <div class="weex-search">
      <div class="weex-col">
        <div class="weex-col-7-8">
          <input type="text" placeholder="请输入小区名称" class="search weex-search-input small-size" @focus="inputOnFocus" @blur="inputOnBlur" value="" @input="changeKeys" />
        </div>
        <div class="weex-col-1-8" v-show="onfocus">
          <a class="search-button weex-search-button" href="#">
            <text class="search-text  weex-search-button-text small-size" @click="searchKey">搜索</text>
          </a>
        </div>
      </div>
    </div>
    <scroller class="scroller">
      <div v-if="data.length > 0">
        <div class="cell" v-for="(item, i) in data">
          <div class="panel">
            <text class="text1 normal-size">{{item.communityName}} <text class="text2">{{item.apprStatusName}}</text></text>
            <text class="text3"><text class="text4 small-size">支付宝小区ID：</text><text class="text5 small-size">{{item.alipayCommunityId}}</text></text>
          </div>
        </div>
      </div>
      <div v-else class="no-result-wrap">
        <text class="no-result normal-size">没有符合条件的小区信息</text>
      </div>
      <loading class="loading" @loading="onloading" :display="showLoading">
        <text class="indicator"></text>
      </loading>
    </scroller>
  </div>
</template>
<script>
  var dingtalk = require('weex-dingtalk');
  const dd = dingtalk.apis;
  const modal = weex.requireModule('modal')

  const getData = _webpath + '/tenantmanager/ajax/selectcommunitylist';
  export default {
    data () {
      return {
        showLoading: 'hide',
        data: [],
        keyWords: '',
        pageNum: 1,
        onfocus: false,
      }
    },
    mounted: function(){
      dingtalk.ready(function(){
        // 设置导航
        const dd = dingtalk.apis;
        dd.biz.navigation.setTitle({
          title: '租户查询'
        });
      });
      this.getList();
    },
    methods: {
      onloading (event) {
          this.showLoading = 'show';
          var self = this;
          modal.toast({ message: '数据正在加载中', duration: 1 })
          setTimeout(() => {
            self.pageNum ++;
            self.getList();
          this.showLoading = 'hide'
        }, 0)
      },

      changeKeys: function (e) {
        e.stopPropagation();
        this.keyWords = e.value;
      },
      inputOnFocus() {
        this.onfocus = true;
      },
      inputOnBlur() {
        this.onfocus = false;
      },
      searchKey() {
        this.data = [];
        this.pageNum = 1;
        this.getList();
      },
      getList: function(){
        var self = this;
        $.ajax({
          type: 'POST',
          url: getData,
          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
          data:  {
            communityName: this.keyWords,
            pageSize: 10,
            pageNum: self.pageNum,
            tenantId: _tenantId,
          },
          success : function(data) {
            if(data.messageType == 'FAIL') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'WARN') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'SUCCESS') {
              /*dd.device.notification.hidePreloader({
                onSuccess : function(result) {},
                onFail : function(err) {}
              });*/
              var list = data.valueObj;
              var temp = [];
              for(var i = 0; list&&i < list.length;i++){
                temp.push({
                  alipayCommunityId: list[i].alipayCommunityId,
                  apprStatusName: '(' + list[i].apprStatusName + ')',
                  communityName: list[i].communityName,
                });
              }
              self.data = self.data.concat(temp)
              if (self.data.length == 0) {
                $('.no-result-wrap').show();
              }
            }
          },
          error : function(xhr, errorType, error) {
2
          }
        });
      },
    }
  }
</script>
<style scoped>
  .panel {
    width: 100%;
    padding: 15px 0 15px 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
  }
  .text1 {
    display: inline-block;
    padding-bottom: 4px;
  }
  .text2 {
    display: inline-block;
    position: absolute;
    bottom: 8px;
    font-size: 20px;
  }
  .text3 {
    display: inline-block;
    padding: 4px 0 2px 2px;
    color: #999;
  }
  .text4 {
    display: inline-block;
    //width: 4rem;
  }
  .text5 {
    display: inline-block;
    float: right;
    color: #999;
    padding-right: 20px;
  }
  .loading {
    justify-content: center;
  }
  .indicator {
    color: #888888;
    font-size: 37px;
    padding-top: 37px;
    padding-bottom: 37px;
    text-align: center;
  }
  .no-result-wrap {
    display: none;
    margin-top: 80px;
  }
  .no-result{
    color: #666;
    line-height: 75px;
    text-align: center;
  }
  .scroller {
    display: block;
  }
</style>